<template>
  <div class="alignment-control-panel">
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 前轮X轴区域 -->
      <div class="axis-panel">
        <h3 class="axis-title">前轮X轴</h3>
        <div class="panel-content">
          <!-- 左侧：图形表示 -->
          <div class="visual-representation">
            <div class="mechanical-component">
              <el-icon class="motor-icon"><Setting /></el-icon>
              <span class="arrow">→</span>
            </div>
            <div class="position-line">
              <div class="position-marker front-limit">
                <span class="arrow">→</span>
                <span class="label">前限</span>
              </div>
              <div class="position-marker initial-point">
                <span class="dot">●</span>
                <span class="label">初始点</span>
              </div>
              <div class="position-marker rear-limit">
                <span class="arrow">←</span>
                <span class="label">后限</span>
              </div>
            </div>
          </div>

          <!-- 中间：输入和显示字段 -->
          <div class="input-fields">
            <div class="field-group">
              <label>设定位置(mm):</label>
              <el-input 
                v-model="frontWheel.setPosition"
                placeholder="请输入数值"
                size="large"
              />
            </div>
            <div class="field-group">
              <label>设定速度(mm/s):</label>
              <el-input 
                v-model="frontWheel.setSpeed" 
                size="large"
                readonly
              />
            </div>
            <div class="field-group">
              <label>当前位置(mm):</label>
              <el-input 
                v-model="frontWheel.currentPosition" 
                size="large"
                readonly
              />
            </div>
            <div class="field-group">
              <label>当前速度(mm/s):</label>
              <el-input 
                v-model="frontWheel.currentSpeed" 
                size="large"
                readonly
              />
            </div>
          </div>

          <!-- 右侧：控制按钮和标定点坐标 -->
          <div class="control-section">
            <!-- 状态图标 -->
            <div class="status-icons">
              <el-icon class="status-icon active"><Sunny /></el-icon>
              <el-icon class="status-icon"><Grid /></el-icon>
              <el-icon class="status-icon"><Light /></el-icon>
            </div>

            <!-- 控制按钮 -->
            <div class="control-buttons">
              <el-button type="primary" size="large" @click="handleMoveForward('front')">
                前移
              </el-button>
              <el-button type="primary" size="large" @click="handleMoveBackward('front')">
                后移
              </el-button>
              <el-button type="success" size="large" @click="handlePositioning('front')">
                定位
              </el-button>
              <el-button type="warning" size="large" @click="handleConfirm('front')">
                确认
              </el-button>
            </div>

            <!-- 标定点坐标 -->
            <div class="calibration-coordinates">
              <label>标定点坐标(预设)</label>
              <div class="target-coordinates">
                <span class="label">目标坐标:</span>
                <span class="value">{{ frontWheel.targetCoordinates }}</span>
              </div>
              <el-button type="info" size="large" @click="handleNonStandardCalibration('front')">非标标定</el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 后轮X轴区域 -->
      <div class="axis-panel">
        <h3 class="axis-title">后轮X轴</h3>
        <div class="panel-content">
          <!-- 左侧：图形表示 -->
          <div class="visual-representation">
            <div class="mechanical-component">
              <el-icon class="motor-icon"><Setting /></el-icon>
              <span class="arrow">→</span>
            </div>
            <div class="position-line">
              <div class="position-marker front-limit">
                <span class="arrow">→</span>
                <span class="label">前限</span>
              </div>
              <div class="position-marker initial-point">
                <span class="dot">●</span>
                <span class="label">初始点</span>
              </div>
              <div class="position-marker rear-limit">
                <span class="arrow">←</span>
                <span class="label">后限</span>
              </div>
            </div>
          </div>

          <!-- 中间：输入和显示字段 -->
          <div class="input-fields">
            <div class="field-group">
              <label>设定位置(mm):</label>
              <el-input
                v-model="rearWheel.setPosition" 
                placeholder="请输入数值"
                size="large"
              />
            </div>
            <div class="field-group">
              <label>设定速度(mm/s):</label>
              <el-input 
                v-model="rearWheel.setSpeed" 
                size="large"
                readonly
              />
            </div>
            <div class="field-group">
              <label>当前位置(mm):</label>
              <el-input 
                v-model="rearWheel.currentPosition" 
                size="large"
                readonly
              />
            </div>
            <div class="field-group">
              <label>当前速度(mm/s):</label>
              <el-input 
                v-model="rearWheel.currentSpeed" 
                size="large"
                readonly
              />
            </div>
          </div>

          <!-- 右侧：控制按钮和标定点坐标 -->
          <div class="control-section">
            <!-- 状态图标 -->
            <div class="status-icons">
              <el-icon class="status-icon active"><Sunny /></el-icon>
              <el-icon class="status-icon"><Grid /></el-icon>
              <el-icon class="status-icon"><Light /></el-icon>
            </div>

            <!-- 控制按钮 -->
            <div class="control-buttons">
              <el-button type="primary" size="large" @click="handleMoveForward('rear')">
                前移
              </el-button>
              <el-button type="primary" size="large" @click="handleMoveBackward('rear')">
                后移
              </el-button>
              <el-button type="success" size="large" @click="handlePositioning('rear')">
                定位
              </el-button>
              <el-button type="warning" size="large" @click="handleConfirm('rear')">确认</el-button>
            </div>

            <!-- 标定点坐标 -->
            <div class="calibration-coordinates">
              <label>标定点坐标(预设)</label>
              <div class="target-coordinates">
                <span class="label">目标坐标:</span>
                <span class="value">{{ rearWheel.targetCoordinates }}</span>
              </div>
              <el-button type="info" size="large" @click="handleNonStandardCalibration('rear')">
                非标标定
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { Setting, Sunny, Grid } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

interface WheelData {
  setPosition: string
  setSpeed: string
  currentPosition: string
  currentSpeed: string
  targetCoordinates: string
}



const frontWheel = reactive<WheelData>({
  setPosition: '',
  setSpeed: '200.000',
  currentPosition: '',
  currentSpeed: '',
  targetCoordinates: '9086.999'
})

const rearWheel = reactive<WheelData>({
  setPosition: '',
  setSpeed: '200.000',
  currentPosition: '',
  currentSpeed: '',
  targetCoordinates: '9086.999'
})



// 前移
const handleMoveForward = (wheel: 'front' | 'rear'): void => {
  const wheelName = wheel === 'front' ? '前轮' : '后轮'
  ElMessage.success(`${wheelName}前移指令已发送`)
}

// 后移
const handleMoveBackward = (wheel: 'front' | 'rear'): void => {
  const wheelName = wheel === 'front' ? '前轮' : '后轮'
  ElMessage.success(`${wheelName}后移指令已发送`)
}

// 定位
const handlePositioning = (wheel: 'front' | 'rear'): void => {
  const wheelName = wheel === 'front' ? '前轮' : '后轮'
  ElMessage.success(`${wheelName}定位指令已发送`)
}

// 确认
const handleConfirm = (wheel: 'front' | 'rear'): void => {
  const wheelName = wheel === 'front' ? '前轮' : '后轮'
  ElMessage.success(`${wheelName}确认指令已发送`)
}

// 非标标定
const handleNonStandardCalibration = (wheel: 'front' | 'rear'): void => {
  const wheelName = wheel === 'front' ? '前轮' : '后轮'
  ElMessage.info(`${wheelName}非标标定功能`)
}


</script>

<style scoped>
.alignment-control-panel {
  padding: 24px;
  background-color: #f5f5f5;
  min-height: 100vh;
}



.main-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.axis-panel {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.axis-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #e6f7ff;
}

.panel-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  align-items: start;
}

/* 左侧图形表示 */
.visual-representation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.mechanical-component {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 2px solid #e9ecef;
}

.motor-icon {
  font-size: 24px;
  color: #666;
}

.arrow {
  font-size: 20px;
  color: #666;
}

.position-line {
  position: relative;
  width: 200px;
  height: 4px;
  background: #dee2e6;
  border-radius: 2px;
}

.position-marker {
  position: absolute;
  top: -8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.position-marker.front-limit {
  left: 0;
}

.position-marker.initial-point {
  left: 50%;
  transform: translateX(-50%);
}

.position-marker.rear-limit {
  right: 0;
}

.position-marker .arrow {
  font-size: 16px;
  color: #666;
}

.position-marker .dot {
  font-size: 20px;
  color: #1890ff;
}

.position-marker .label {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}

/* 中间输入字段 */
.input-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-group label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

/* 右侧控制区域 */
.control-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.status-icons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.status-icon {
  font-size: 20px;
  color: #ccc;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.status-icon.active {
  color: #f39c12;
  background: rgba(243, 156, 18, 0.1);
}

.status-icon:hover {
  background: rgba(0, 0, 0, 0.05);
}

.control-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calibration-coordinates {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.calibration-coordinates label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-align: center;
}

.target-coordinates {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.target-coordinates .label {
  font-size: 12px;
  color: #666;
}

.target-coordinates .value {
  font-size: 18px;
  font-weight: 600;
  color: #e74c3c;
  background: white;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #e9ecef;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .panel-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .header {
    flex-direction: column;
    gap: 20px;
  }

  .global-actions {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .global-actions {
    flex-direction: column;
    width: 100%;
  }

  .global-actions .el-button {
    width: 100%;
  }

  .control-buttons .el-button {
    width: 100%;
  }
}
</style>
